﻿@{
ViewData["Title"] = "用户管理";
}

<div class="layui-main layui-padding-1">
	<div class="layui-row">
		<table class="layui-table" id="user-table">
		</table>
	</div>

	<div class="layui-row">
		<button type="button" class="layui-btn" onclick="addUser()" style="margin-top: 10px;">添加用户</button>
	</div>
</div>



@section Scripts {
<script>
	//用户编辑窗口
	function addUser() {
		layui.use(function() {
			var layer = layui.layer;
			layer.open({
				type: 2,
				area: ['720px', '520px'], // 宽高
				title: '编辑用户',
				content: `/Users/EditUser`,
				//当窗口关闭时触发
				end: function() {
					location.reload();
				}
			});
		});
	}

	layui.use(['table'], function() {
		var table = layui.table;

		// 渲染表格
		let n = 1;
		table.render({
			elem: '#user-table',
			url: '/api/Users/getUserList',
			cols: [
				[{
						field: 'id',
						title: 'ID',
						width: 30,
						templet: function(row) {
							return `<span>${n++}</span>`;
						}
					},
					{
						field: 'name',
						title: '用户名'
					},
					{
						field: 'phoneNumber',
						title: '手机号'
					},
					{
						field: 'q1',
						title: '首页权限',
						templet: function(row) {
							return `<span>${row.q1 == 1 ? '✓' : '×'}</span>`;
						}
					},
					{
						field: 'q2',
						title: '采购权限',
						templet: function(row) {
							return `<span>${row.q2 == 1 ? '✓' : '×'}</span>`;
						}
					},
					{
						field: 'q3',
						title: '销售权限',
						templet: function(row) {
							return `<span>${row.q3 == 1 ? '✓' : '×'}</span>`;
						}
					},
					{
						field: 'q4',
						title: '收支权限',
						templet: function(row) {
							return `<span>${row.q4 == 1 ? '✓' : '×'}</span>`;
						}
					},
					{
						title: '操作',
						width: 150,
						templet: function(row) {
							if (row.name == 'admin') {
								return `<span class="layui-badge layui-bg-orange">系统用户</span>`;
							}
							return `
		                        <button class="layui-btn layui-btn-xs" onclick="editRow('${row.name}')">编辑</button>
		                        <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteRow('${row.name}')">删除</button>
		                    `;
						}
					}
				]
			]
		});
	});


	//编辑用户
	function editRow(name) {
		layui.use(function() {
			var layer = layui.layer;
			layer.open({
				type: 2,
				area: ['720px', '520px'], // 宽高
				title: '编辑用户',
				content: `/Users/EditUser?name=${name}`,
				//当窗口关闭时触发
				end: function() {
					location.reload();
				}
			});
		});
	}

	//删除用户
	function deleteRow(name) {
		layui.use(function() {
			let layer = layui.layer;
			layer.confirm(`确定要删除 ${name} ？`, {
				btn: ['确定', '关闭'] //按钮
			}, function() {
				$.get('/api/Users/Del', {
					name: name
				}, function(response) {
					layer.msg(response.message, {
						icon: 1
					});
					setTimeout(function(){
						location.reload();
					},2000);
				});
			}, function() {
				layer.msg('取消删除', {
					icon: 1
				});
			});
		});
	}
</script>
}